{% extends 'front/index_products/base_index_products.html' %}
{% block title %}图书详情{% endblock %}

{% block css %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/pagination.css') }}">
    <script src="{{ url_for('static', filename='js/pagination.js') }}"></script>

{% endblock %}

{% block main %}
    <div class="container product">
        <div class="col-md-4 column left">
            <img alt="{{ book.title }}" src="{{ book.img_url }}" title="{{ book.title }}"/>
        </div>
        <div class="col-md-8 column left">
            <div class="book_detail">
                <div class="title"><h1>{{ book.title }}</h1></div>
                <div class="subheading"><p>{{ book.subheading }}</p></div>
                <div class="author author_a left">
                    <span>作者：</span>
                    <a href="{{ url_for('products.search', word=book['author']) }}">{{ book.author }}</a>
                </div>
                <div class="press author_a left">
                    <span>出版社：</span>
                    <a href="{{ url_for('products.search', word=book['press']) }}">{{ book.press }}</a>
                </div>
                <div class="pub_time left">
                    <span>{% if '出版' in book.pub_time %}{{ book.pub_time }}{% else %}出版时间：
                        {{ book.pub_time }}{% endif %}</span>
                </div>
                <div class="price"><h1>￥{{ book.price }}</h1></div>
                <div class="price_m"><span>定价：</span><span class="old">￥{{ book.price_m }}</span></div>
                <div class="price_m">库存: <span id="stock">{{ book.stock | int }}</span></div>
                {% for message in get_flashed_messages() %}
                    <div class="alert alert-danger"><b>{{ message }}</b></div>
                {% endfor %}
            </div>
            <div class="button col-md-12">
                <form method="get" action="/product/add_to_cart">
                    <div class="left">
                        <input class="book_num left" id="cut" type="button" value="-" onclick="reductionOf(this)">
                        <input class="book-num left" name="num" id="num" type="text" value="1"
                               oninput="if(value>{{ book.stock }})value={{ book.stock }}"
                               onblur="checkNumber(this)">
                        <input class="book_num" type="button" id="add" value="+" onclick="add(this)">
                        <input type="hidden" name="book_id" value={{ book['_id'] }} id="book_id">
                    </div>
                    <div class="cart left">
                        <button type="submit" id="calculate"
                                class="btn btn-default left">加入购物车
                        </button>
                    </div>
                    <div class="pay">
                        <a type="button" href="{{ url_for('products.buy', book_id=book['_id']) }}"
                           id="buy-now" class="btn btn-default left">立即购买(1)</a>
                    </div>
                    <div>
                        <a class="btn btn-default" onclick="to_collection(book_id='{{ book['_id'] }}')">
                            {% if is_collection %}
                                <span id="star" class="glyphicon glyphicon-star"></span>
                            {% else %}
                                <span id="star"
                                      class="glyphicon glyphicon-star-emptyglyphicon glyphicon-star-empty"></span>
                            {% endif %}
                            收藏商品
                        </a>
                    </div>

                </form>
            </div>
        </div>

        <div class="col-md-12">
            <hr class="description-hr">
        </div>

        <div class="col-md-2 column recommend_book" ng-controller="recommend_product" ng-init="id:{{ book._id }}">
            <div class="text-center"><p>为你推荐</p></div>
            <ul>
                <li ng-repeat="book in recommend_book">
                    <a href="/product%3F{{ '{{book.id}}' }}">
                        <img src="{{ '{{book.img}}' }}" title="{{ '{{book.title}}' }}" alt="{{ '{{book.title}}' }}">
                        <p>{{ '{{book.title}}' }}</p>
                        <p>{{ '{{book.author}}' }}</p>
                    </a>
                    <hr>
                </li>
            </ul>
        </div>
        <div class="col-md-10 column description">
            <h3>详情</h3>
            <div class="desc_img">
                {% if book.img_urls %}
                    {% for img in book.img_urls %}
                        <img src="{{ img }}" alt="{{ book.title }}" title="{{ book.title }}">
                    {% endfor %}
                {% else %}
                    <img src="{{ book.img_url }}" alt="{{ book.title }}" title="{{ book.title }}">
                {% endif %}
            </div>
            <div {% if request and 'product_page' in request | string %}id="moreMerchant"{% endif %}>
                <p>{{ book.subheading }}</p>
            </div>
            <hr>

            <div class="col-md-12 column">
                <div class="text-center">
                    <h3>用户评论</h3>
                </div>
                <div>
                    <span class="col-md-2 col-md-offset-1">全部：{{ total }}</span>
                    <span class="col-md-2">好评：{{ evaluates_details.get('praise') }}</span>
                    <span class="col-md-2">中评：{{ evaluates_details.get('mid') }}</span>
                    <span class="col-md-2">差评：{{ evaluates_details.get('negative') }}</span>
                </div>
                <div class="col-md-12">
                    <ul>
                        {% for evaluate in evaluates %}
                            <li>
                                <div class="col-md-12 evaluate">
                                    <div class="col-md-10">
                                        <br>
                                        <div>
                                            <div class="score left">
                                                <span class="current" style="width: {{ evaluate.star * 20 }}%;"></span>
                                            </div>
                                            <em class="score-em">{{ evaluate.star }} 星</em>
                                        </div>
                                        <br>
                                        <div class="evaluate-content">
                                            <p>{{ evaluate.context }}</p>
                                        </div>
                                        <div class="evaluate-img">
                                            {% if evaluate.img_path %}
                                                <img src="{{ evaluate.img_path }}" alt="评论图片" title="评论图片">
                                            {% endif %}
                                        </div>
                                        <br>
                                        <div class="create-time">
                                            <span>{{ evaluate.create_time }}</span>
                                        </div>
                                        <br>
                                    </div>
                                    <div class="col-md-2 text-center">
                                        <br>
                                        <div class="img-user"><img src="{{ evaluate.avatar }}" alt="用户头像" title="用户头像">
                                        </div>
                                        <br>
                                        <span>{{ evaluate.user_name }}</span>
                                    </div>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                    <div id="pages" class="col-md-12">0
                    </div>
                </div>
            </div>
        </div>
        <script>
            new Pagination({
                element: '#pages',
                type: 1,
                pageIndex: {{ active_page }},   //默认活动页
                pageSize: {{ page_size }},	//一页数量
                pageCount: {{ page_count }},   //显示页数
                total: {{ total }},      //总数
                jumper: true,
                singlePageHide: false,
                prevText: '上一页',
                nextText: '下一页',
                disabled: false,
                currentChange: function (index) {
                    {#console.log(index);#}
                    //https://blog.csdn.net/pengShuai007/article/details/86528992
                    var a = document.createElement('a');
                    a.setAttribute('href', '/product_page?id={{ book["_id"] | string }}&page=' + index);
                    // 防止反复添加
                    if (document.getElementById('startTelMedicine')) {
                        document.body.removeChild(document.getElementById('startTelMedicine'));
                    }
                    document.body.appendChild(a);
                    a.click();
                }
            });
        </script>
        <div class="col-md-12">
            <hr class="description-hr">
        </div>
    </div>
{% endblock %}

{% block footer %}
    {{ super() }}
    {#返回顶部控件#}
    <div id="to_top">
        <a href="javascript:;" id="to_top_btn"></a>
    </div>
    {#隐藏登录控件#}
    <div>
        <div class="mypop" style="display: none">
            <div class="graybox"></div>
            <div class="popbox">
                <div class="poptop">
                    <h3>登 录</h3>
                    <a href="#" class="close"></a>
                </div>
                {#            <form role="form" method="post" action="{{ url_for('user_login_register.index_login') }}">#}
                {#            错误信息flash #}
                <span id="message"></span>
                <div class="popcon">
                    <div>
                        <div class="group">
                            {#                    失去焦点：onBlur="if(value==''){value='请输入密码'}"获取焦点：onFocus="if(value=='请输入密码') {value=''}"#}
                            <input type="tel" placeholder="请输入您的手机号码" name="username" pattern="[0-9]{11}"
                                   id="login_username"
                                    {#                               onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"#}
                                   required autofocus maxlength="11" minlength="11">
                            <i class="fa fa-user"></i>
                        </div>
                        <div class="group">
                            <input type="password" name="password" required placeholder="请输入您的密码" id="login_password">
                            <i class="fa fa-lock"></i>
                        </div>
                    </div>
                    <div class="remember clearfix">
                        {#                    <div class="remember-con">#}
                        {#                        <input type="checkbox" id="input1" class="inputbox">#}
                        {#                        <label for="input1">记住密码</label>#}
                        {##}
                        {#                    </div>#}
                        <div class="remember-con">
                            <a href="{{ url_for('building.building') }}" class="code"><i
                                    class="fa fa-question-circle"></i>忘记密码</a>
                            <a href="{{ url_for('user_login_register.register') }}"><i
                                    class="fa fa-question-circle"></i>去注册</a>&nbsp;
                            <a href="mailto:caisi1735@163.com"><i class="fa fa-question-circle"></i>Email to Admin</a>

                        </div>
                    </div>
                </div>
                <div class="divbtn clearfix">
                    <a class="btn" id="cancel" href="#">取消</a>
                    {#                <a href="{{ url_for('building.building') }}" class="btn ok" onclick="index_login()">登陆</a>#}
                    <button type="submit" class="btn ok" id="index_login">登陆</button>
                </div>
                {#            </form>#}
            </div>
        </div>
    </div>
{% endblock %}
